<template>
  <view class="c-header-container" :style="{ height: sysInfo.topBarH + 'px', background: show ? background : '' }">
    <view
      class="header"
      :style="{
        height: `${sysInfo.topBarH - sysInfo.statusBarH}px`,
        paddingTop: `${sysInfo.statusBarH}px`
      }"
    >
      <view class="left" :style="{ color: color }" @tap="goBack" v-if="showBack">
        <nut-icon name="left" :color="show ? color : '#fff'" size="14" style="margin-bottom: -2px;"></nut-icon>
      </view>
      <view class="title" :style="{ color: color }" v-if="show">
        {{ title }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, ref } from 'vue'
import { getSysInfo } from '@/common/system'
import { useDidShow, getStorage, getStorageSync, navigateBack } from '@tarojs/taro'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#000'
  },
  background: {
    type: String,
    default: 'white'
  },
  showBack: {
    type: Boolean,
    default: true
  },
  show: {
    type: Boolean,
    default: true
  }
})

const sysInfo = ref({
  topBarH: 40,
  statusBarH: 44
})

useDidShow(() => {
  sysInfo.value = getSysInfo()
})

const goBack = () => {
  navigateBack({
    delta: 1
  })
}
</script>

<style lang="scss">
.c-header-container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  transition: 0.15s;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;

    .left {
      width: 50px;
      position: absolute;
      left: 16px;
      font-size: 14px;
    }
    .title {
      width: 280px;
      font-size: 18px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      z-index: 2;
    }
  }
}
</style>
